<template>
	<view>
		<view id="screen">
			<view class="reviport_top">
				<view class="report_num">
					<image src="/static/curr/report_num.png" mode=""></image>
					<view class="report_text">
						<view class="">
							<text class="f60">{{ ratio }}</text><text class="f40">%</text>
						</view>
						<view class="gray9" style="text-align: center;">正确率</view>
					</view>
				</view>
				<view class="tc gray3 f30 fb mb23">抗遗忘复习情况统计</view>
				<view class="tc f26 mb16">学生姓名:{{ nickname }}</view>
				<view class="tc f26">学生编号:{{ userNo }}</view>
				<view class="reviport_top_box">
					<view class="reviport_top_box_item mb20">
						<view class="reviport_top_box_item_num">{{ totalNum }}个</view>
						<view class="f26 gray3">需复习</view>
					</view>
					<view class="reviport_top_box_item mb20">
						<view class="reviport_top_box_item_num">{{ readyNum }}个</view>
						<view class="f26 gray3">已复习</view>
					</view>
					<view class="reviport_top_box_item">
						<view class="reviport_top_box_item_num">{{ noNum }}个</view>
						<view class="f26 gray3">遗忘数</view>
					</view>
					<view class="reviport_top_box_item">
						<view class="reviport_top_box_item_num">0个</view>
						<view class="f26 gray3">未复习</view>
					</view>
				</view>
			</view>
			<view class="reviport_bot">
				<view class="f30 fb gray3 mb10">本次遗忘记录</view>
				<view class="reviport_bot_item" v-for="(item, index) in list" :key="index" :class="{'reviport_bot_item1':index < list.length-1}" @tap="playAudio(item.audio_url)">
					<view class="d-b-c">
						<view class="d-a-c">
							<view class="reviport_bot_item_dian"></view>
							<view class="">
								<view class="gray3 fb f30">{{ item.word }}</view>
							</view>
						</view>
						<view class="">
							<u-icon name="volume" color="#333333" size="30"></u-icon>
						</view>
					</view>
					<view class="gray9 f26 ml20 mt20">{{ item.chinese }}</view>
				</view>
			</view>
		</view>
		<view style="height: 120rpx;"></view>
		<view class="learindete_bot d-c-c tc">
			<view class="learindete_bot_but_1" @tap="goLog">往期复习</view>
			<!-- <view class="learindete_bot_but_2" @tap="goShare">微信分享</view> -->
		</view>
		<!--绘制截图-->
		<canvas canvas-id="myCanvas" style="width:750rpx;height:600rpx;position:fixed;left:0;top:0;z-index:-1;"></canvas>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordId: '',
				ratio: 0,
				nickname: '',
				userNo: '',
				totalNum: 0,
				readyNum: 0,
				noNum: 0,
				noReviewNum: 0,
				list: [],
			}
		},
		onLoad(option) {
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 2000)
				return false
			} else {
				if (option.recordId) {
					this.recordId = option.recordId
					this.getReport()
				} else {
					uni.navigateBack()
				}
			}
		},
		onBackPress(option) {
			if (option.from == 'navigateBack' || option.from == 'backbutton') {
				uni.reLaunch({
					url: '/pages/index/index'
				})
				return true
			}
			return false
		},
		methods: {
			getReport() {
				this.$u.post(this.$u.api.reviewRecordDetail, {
					recordId: this.recordId,
					voiceType: this.$store.state.voiceType,
				}).then((res) => {
					console.log(res)
					let data = res.data
					this.ratio = data.ratio
					this.nickname = data.nickname
					this.userNo = data.user_id
					this.totalNum = data.total_word_num
					this.readyNum = data.ready_word_num
					this.noNum = data.no_word_num
					this.noReviewNum = data.no_review_num
					this.list = data.no_list
				}).catch((res) => {
					console.log(res)
				})
			},
			// 发音
			playAudio(audio) {
				if (audio) {
					this.utils.playAudio(audio)
				}
			},
			// 往期复习
			goLog() {
				uni.navigateTo({
					url: '/pages/study/review21/record'
				})
			},
			// 分享
			async goShare() {
				let logId = this.logId
				let baseUrl = getApp().globalData.baseUrl
				// #ifdef APP
				await this.capture().then((res) => {
					uni.share({
						provider: 'weixin',
						scene: "WXSceneSession",
						type: 5,
						imageUrl: res,
						title: '21天抗遗忘打卡',
						miniProgram: {
							id: 'gh_1ae9edc40883',
							path: `/pages/study/report21_share?logId=${logId}`,
							type: 0,
							webUrl: baseUrl + `/h5/#/pages/study/report21?logId=${logId}`
						},
						success: ret => {
							console.log(JSON.stringify(ret));
						},
						fail(e) {
							console.log(e)
						}
					})
					// uni.shareWithSystem({
					// 	summary: '快来看看' + this.nickname + '的复习情况吧~\n',
					// 	href: getApp().globalData.baseUrl + '/h5/#/pages/study/report21',
					// 	success() {
					// 		// 分享完成，请注意此时不一定是成功分享
					// 		console.log('分享成功')
					// 	},
					// 	fail() {
					// 		// 分享失败
					// 		console.log('分享失败')
					// 	}
					// })
				}).catch((err) => {
					uni.$u.toast('分享失败')
				})
				// #endif
				// #ifdef H5
				uni.$u.toast('请去app应用进行分享操作')
				// #endif
			},
			// 页面截图
			capture() {
				return new Promise((resolve, reject) => {
					var pages = getCurrentPages()
					var page = pages[pages.length - 1]
					console.log('当前页：'+pages.length-1)
					var bitmap = null
					var currentWebview = page.$getAppWebview()
					bitmap = new plus.nativeObj.Bitmap('amway_img')
					// 将webview内容绘制到Bitmap对象中
					currentWebview.draw(bitmap, function() {
						console.log('截屏绘制图片成功')
						bitmap.save( "_doc/a.jpg" ,{}, function(i) {
							resolve(i.target)
							console.log('保存图片成功：'+JSON.stringify(i))
							// uni.saveImageToPhotosAlbum({
							// 	filePath: i.target,
							// 	success: function () {
							// 		bitmap.clear(); //销毁Bitmap图片
							// 		uni.showToast({
							// 			title: '保存图片成功',
							// 			mask: false,
							// 			duration: 1500
							// 		});
							// 	}
							// });
						}, function(e) {
							reject(e)
							console.log('保存图片失败：'+JSON.stringify(e))
						})
					}, function(e) {
						reject(e)
						console.log('截屏绘制图片失败：'+JSON.stringify(e))
					})
					//currentWebview.append(amway_bit);
				})
			},
			// 绘制屏幕截图
			createCanvas(that) {
				return new Promise((resolve, reject) => {
					// 创建canvas
					const ctx = uni.createCanvasContext('myCanvas', that)
					// 设置canvas宽高
					const query = uni.createSelectorQuery().in(that)
					query.select('#screen').boundingClientRect(rect => {
						console.log("得到布局位置信息" + JSON.stringify(rect))
						ctx.width = rect.width
						ctx.height = rect.height
						// 将当前页面绘制到canvas
						ctx.draw(true, setTimeout(() => {
							uni.canvasToTempFilePath({
								canvasId: 'myCanvas',
								success: (res) => {
									resolve(res.tempFilePath)
									console.error('生成图片成功', res)
								},
								fail: (err) => {
									reject(err)
									console.error('生成图片失败', err)
								}
							}, that)
						}, 100))
					}).exec()
				})
			},
		}
	}
</script>

<style lang="less">
	.reviport_top{
		width: 92%;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		margin: 30rpx auto;
	}
	.report_num{
		width: 246rpx;
		height: 246rpx;
		margin: 0 auto 40rpx;
		color: #3777E5;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		image{
			width: 246rpx;
			height: 246rpx;
		}
		.report_text{
			position: absolute;
		}
	}
	.reviport_top_box{
		margin-top: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.reviport_top_box_item{
		width: 47%;
		background: #F6F7F9;
		border-radius: 20rpx;
		padding: 35rpx 30rpx 40rpx;
		box-sizing: border-box;
	}
	.reviport_top_box_item_num{
		font-weight: bold;
		font-size: 40rpx;
		color: #3777E5;
		margin-bottom: 33rpx;
	}
	.reviport_bot{
		width: 92%;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 30rpx 10rpx;
		margin: 30rpx auto;
	}
	.reviport_bot_item{
		padding: 30rpx 0;
	}
	.reviport_bot_item_dian{
		width: 10rpx;
		height: 10rpx;
		background: #347FF1;
		border-radius: 50%;
		margin-right: 10rpx;
	}
	.reviport_bot_item1{
		border-bottom: 2rpx solid #EEEEEE;
	}
</style>
